<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>一次性在dom添加多个节点</h1>
  <script>
    function creatDom(text) {
      const div = document.createElement('div')
      div.innerHTML = text
      document.body.appendChild(div)
    }
    /**
    sumArr: 总数的列表
    count: 每次间隔创建的数量
    interval: 间隔时间
    */
    function timChunk(creatDom, sumArr, count, interval) {
      const start = function() {
        for (let i=0; i < count; i++) {
          creatDom(sumArr.shift())
        }
      }
      return function() {
        const timer = setInterval(() => {
          if (sumArr.length === 0) {
            clearInterval(timer)
            return
          }
          start()
        }, interval || 200)
      }
    }
    window.onload = function() {
      const arr = []
      for (let i=0, len=100000; i < len; i++) {
        arr.push(i)
      }
      console.log('len', arr.length)
      // 一次性添加dom
      // for (let i=0, len=arr.length; i < len; i++) {
      //   creatDom(i)
      // }
      // 每200毫秒，创建10个
      const renderList = timChunk(creatDom, arr, 10, 200)
      renderList()
    }
  </script>
</body>
</html>